<template>
  <view class="cu-bar">
    <view class="action" @click="cut('home', '/pages/home/index')">
      <view class="cuIcon-cu-image">
        <image class="img" src="@/static/home1.png" v-if="current == 'home'" />
        <image class="img" src="@/static/home.png" v-else />
      </view>
      <view :class="current == 'home' ? 'text-green' : 'text-gray'">首页</view>
    </view>
    <view class="action" @click="cut('staging', '/pages/staging/index')">
      <view class="cuIcon-cu-image">
        <image
          class="img"
          src="@/static/user1.png"
          v-if="current == 'staging'"
        />
        <image class="img" src="@/static/user.png" v-else />
      </view>
      <view :class="current == 'staging' ? 'text-green' : 'text-gray'"
        >工作台</view
      >
    </view>
    <!-- <view class="action" @click="cut('reportForms', '/pages/index')">
      <view class="cuIcon-cu-image">
        <image
          class="img"
          src="@/static/user1.png"
          v-if="current == 'reportForms'"
        />
        <image class="img" src="@/static/user.png" v-else />
      </view>
      <view :class="current == 'reportForms' ? 'text-green' : 'text-gray'"
        >报表</view
      >
    </view>
    <view class="action" @click="cut('bulletinBoard', '/pages/login/index')">
      <view class="cuIcon-cu-image">
        <image
          class="img"
          src="@/static/user1.png"
          v-if="current == 'bulletinBoard'"
        />
        <image class="img" src="@/static/user.png" v-else />
      </view>
      <view :class="current == 'bulletinBoard' ? 'text-green' : 'text-gray'"
        >看板</view
      >
    </view> -->
    <view class="action" @click="cut('user', '/pages/user/index')">
      <view class="cuIcon-cu-image">
        <image class="img" src="@/static/user1.png" v-if="current == 'user'" />
        <image class="img" src="@/static/user.png" v-else />
      </view>
      <view :class="current == 'user' ? 'text-green' : 'text-gray'">我的</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabCurrent: String,
  },
  data() {
    return {
      current: "",
    };
  },
  computed: {},
  created() {
    this.current = this.tabCurrent;
  },
  watch: {
    tabCurrent: {
      handler: function (val, oldVal) {
        this.current = val;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    cut(value, path) {
      this.current = value;
      if (path) {
        uni.navigateTo({
          url: path,
          animationType: "pop-in",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.cu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 129rpx;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding-top: 12rpx;
  border-top: 1px solid #e0e0e0;

  .action {
    flex: 1;
    text-align: center;
  }

  .img {
    width: 58rpx;
    height: 50rpx;
  }

  .text-green {
    color: #6488e6;
  }
}
</style>
